<template>
    <el-card class="box-card">
         <div style="height: 100%;background: white;">
            <div class="box-row-1">
                <el-form :inline="true" :model="ruleForm" ref="dataForm1">
                    <el-form-item label="分类名称" prop="groupedName" class="itemClass">
                        <el-input size="small" v-model="ruleForm.groupedName" placeholder="请输入分类名称"></el-input>
                    </el-form-item>

                    <el-form-item label="启用状态" prop="State" class="itemClass">
                        <el-select size="small" v-model="ruleForm.State" placeholder="请选择" clearable>
                            <el-option v-for="item in options" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="el-button--mini" type="primary" icon="el-icon-search" @click="submitForm('dataForm1')">搜索</el-button>
                        <el-button class="el-button--mini" @click="resetForm('dataForm1')" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="box-row-2">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-button size="small" type="info" icon="el-icon-sort" @click="handTrigger">展开/折叠</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light" style="text-align:right;">
                            <el-button  icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="box-row-3">
                <el-table v-if="refreshTable" :data="tableData" style="width: 100%;height:100%" ref="dataTable" v-loading="isloading" 
                    :default-expand-all="isExpand" row-key="iteM_TYPE_ID" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column v-if="show" prop="iteM_TYPE_ID" label="#" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column v-if="show" prop="parenT_TYPE_ID" label="父节点ID" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed prop="iteM_TYPE_NAME" label="分类" width="160" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="iteM_OR_PRODUCT" label="物料/产品" width="180" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="enablE_FLAG" label="是否启用" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.enablE_FLAG == 0 ? 'primary' : 'danger'" disable-transitions>
                                <div v-if="scope.row.enablE_FLAG == 0">启用</div>
                                <div v-else>禁用</div>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注"  align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="creatE_TIME" label="创建时间" width="180" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                        <el-button @click="add(scope.row)" type="text" size="small" icon="el-icon-plus">新增</el-button>
                        <el-button @click="handleDel(scope.row)" type="text" size="small" icon="el-icon-delete" v-if="scope.row.parenT_TYPE_ID!=null">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        
        <el-dialog width="450px" :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
           <MaterialsProductInput :model="model" :options="tableData" :isUpdate="isUpdate" 
             @DataBind="dataBind" @CloseDialog="closeDialog" />
        </el-dialog>
        
    </el-card>
</template>

<script>
import MaterialsProductInput from './MasterDataComponents/MaterialsProductCInput.vue'

export default {
    components:{
        MaterialsProductInput
    },
    data(){
        return{
            options:[{
                    value:'0',
                    label:'启用'
                },{
                    value:'1',
                    label:'禁用'
                }
            ],
            ruleForm:{
                groupedName:'',
                State:''
            },
            model:{
                iteM_TYPE_ID:'',
                iteM_TYPE_NAME:'',
                iteM_OR_PRODUCT:'物料',
                parenT_TYPE_ID:'',
                enablE_FLAG:0,
            },
            tableData: [],
            PageIndex:1,//当前页数
            PageSize:10,//每页显示条数
            total:0,//总条数
            show:false,//是否显示某列
            isUpdate:false,//是否修改
            dialogFormVisible:false,//是否显示弹框
            isloading:false,//是否打开加载框
            refreshTable:true,//表格显示状态
            isExpand:true,//是否展开子节点
            title:'新增分类',//弹框标题
        }
    },
    methods:{
        submitForm(formName){
             this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.dataBind();
                }else{
                    this.show('服务繁忙, 请稍后重试!');
                }
            })
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        dataBind(){
            this.isloading = true;
            this.$http.request({
                type:'get',
                url:'/api/MaterialsProductClassify',
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    TypeName:this.ruleForm.groupedName,
                    State:this.ruleForm.State
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            }).catch(err=>{
                this.ShowMsg('服务器繁忙，请稍后重试','error');
            }).finally(()=>{
                this.isloading=false;
            })
        },
        add(model){
            this.model.parenT_TYPE_ID = model.iteM_TYPE_ID;
            this.dialogFormVisible=true;
            this.title="新增分类"
            this.isUpdate = false;
        },
        handleEdit(model){
            this.model = JSON.parse(JSON.stringify(model));
            this.title="修改规则编码";
            this.dialogFormVisible = true;
            this.isUpdate = true;
        },
        handleDel(model){
            let Id = model.iteM_TYPE_ID;
            if(Id != undefined){
                this.$confirm('此操作将永久删除数据, 是否继续?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                })
                .then(()=>{
                    const loading = this.$loading();
                    this.$http.delete('/api/MaterialsProductClassify',{params:{Id:Id}})
                        .then(res =>{
                            if(res.data.code == 200){
                                this.ShowMsg(res.data.msg,'success');
                                this.dataBind();
                            }
                            else{
                                this.ShowMsg(res.data.msg,'warning');
                            }
                        }).catch(err =>{
                            this.ShowMsg('服务器繁忙，请稍后重试','error');
                        }).finally(()=>{
                            setTimeout(()=>{
                                loading.close();
                            },500);
                        })
                }).catch(()=>{})
            }
        },
        handTrigger(){
            this.refreshTable =false;
            this.isExpand = !this.isExpand
            this.$nextTick(()=>{
                this.refreshTable =true;
            })
        },
        Refresh(){
            this.dataBind();
        },
        //关闭弹框
        closeDialog(){
            this.dialogFormVisible=false;
            this.model={
                iteM_TYPE_ID:'',
                iteM_TYPE_NAME:'',
                iteM_OR_PRODUCT:'物料',
                parenT_TYPE_ID:'',
                enablE_FLAG:0,
            }
        },
    },
    created(){
        this.dataBind();
    }
}
</script>

<style scoped>
.box-card{
    height: 99%;
}
.itemClass{
    margin-right:15px;
}
.box-row-3{
    height: 100%;
}
.box-Input-mini textarea{
    width:100%;
    height:35px;
}
</style>